<<<<<<< HEAD
/*
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-08-11 09:36:34
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @LastEditTime: 2022-08-15 21:41:22
 * @FilePath: \bpm-management-system\src\component\personnelmanage\Kaoqintongji.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'

export default function Kaoqintongji() {
  return (
    <div>Kaoqintongji</div>
  )
=======
import React, { Component } from "react";
import "./../taskmanage/Wofuzwderenwu.less";
import servies from "./../../servies";
import { Button, Form, Input, Select, Table, DatePicker, Space } from "antd";
const { Option } = Select;
const ExportJsonExcel = require("js-export-excel");
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
export default class Kaoqintongji extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      data: [],
      id: "",
      headimg: "",
      username: "",
      udapt: "",
      shangdate: "",
      dakadate: "",
      address: "",
      rulut: "",
      xiadate: "",
      xiadadate: "",
      xiaaddress: "",
      xiarult: "",
      phone: "",
    };
  }
  romref = React.createRef();
  formRef = React.createRef();

  componentDidMount() {
    //发起请求
   servies.Getkaoqing().then((data)=>{
    console.log(data);
    this.setState({
      data:data
    })
   })
  }

  onReset = () => {
    this.formRef.current.resetFields();
  };
  onChange = (e) => {
    e.preventDefault();
    console.log("value", e.target.value);
    let key = e.target.dataset.key;
    this.setState({ [key]: e.target.value });
  };
  // 导出excel
  ExportBtnClick = () => {
    //表格内部数据
    const data = this.state.data;
    console.log(data);
    var option = {};
    let dataTable = [];
    if (data) {
      for (let i in data) {
        if (data) {
          let obj = {
            头像: data[i].headimg,
            姓名: data[i].username,
            部门: data[i].udapt,
            电话: data[i].phone,
            上班打卡时间: data[i].shangdate,
            打卡时间: data[i].dakadate,
            打卡地点: data[i].address,
            打卡结果: data[i].rulut,
            下班打卡时间: data[i].xiadate,
            下打卡时间: data[i].xiadadate,
            下班打卡地点: data[i].xiaaddress,
            下班打卡结果: data[i].xiarult,
          };
          dataTable.push(obj);
        }
      }
    }
    //设置excel名称
    option.fileName = "打卡记录"; 
    option.datas = [
      {
        sheetData: dataTable,
        sheetName: "sheet",
        sheetFilter: ["头像","姓名","部门","电话","上班打卡时间","打卡时间","打卡地点","打卡结果","下班打卡时间",
          "下打卡时间","下班打卡地点","下班打卡结果"],
        sheetHeader: ["头像","姓名","部门","电话","上班打卡时间","打卡时间","打卡地点","打卡结果","下班打卡时间",
        "下打卡时间","下班打卡地点","下班打卡结果"],
        columnWidths: [5, 5, 4, 5, 7, 7, 10, 5, 7, 7, 10, 5],
      },
    ];
    var toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  };
  render() {
    const columns = [
      {
        title: "序号",
        dataIndex: "id",
        key: "id",
        align: "center",
        width: 70,
      },
      {
        title: "头像",
        dataIndex: "headimg",
        key: "1",
        width: 100,
        align: "center",
      },
      {
        title: "姓名",
        dataIndex: "username",
        key: "2",
        width: 100,
        align: "center",
      },
      {
        title: "部门",
        dataIndex: "udapt",
        width: 100,
        key: "3",
        align: "center",
      },
      {
        title: "联系方式",
        dataIndex: "phone",
        width: 120,
        key: "4",
        align: "center",
      },
      {
        title: "上班考勤时间",
        dataIndex: "shangdate",
        width: 141,
        key: "5",
        align: "center",
      },
      {
        title: "上班打卡时间",
        dataIndex: "dakadate",
        width: 141,
        key: "6",
        align: "center",
      },
      {
        title: "上班打卡地点",
        dataIndex: "address",
        key: "7",
        align: "center",
      },
      {
        title: "上班打卡结果",
        dataIndex: "rulut",
        width: 120,
        key: "8",
        align: "center",
      },
      {
        title: "下班考勤时间",
        dataIndex: "xiadate",
        width: 141,
        key: "9",
        align: "center",
      },
      {
        title: "下班打卡时间",
        dataIndex: "xiadadate",
        width: 141,
        key: "10",
        align: "center",
      },
      {
        title: "下班打卡地点",
        dataIndex: "xiaaddress",
        key: "11",
        align: "center",
      },
      {
        title: "下班打卡结果",
        dataIndex: "xiarult",
        key: "12",
        width: 120,
        align: "center",
      },
    ];
    return (
      <>
        <Form
          {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish} >
          <Form.Item name="newbiao" label="员工姓名">
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="联系方式">
            <Input />
          </Form.Item>
          <Form.Item name="udapt" label="部门">
            <Select allowClear onChange={this.onGenderChange} defaultValue="o">
              <Option value="o">全部</Option>
              <Option value="male">财务部</Option>
              <Option value="female">人事部</Option>
              <Option value="other">工程部</Option>
              <Option value="jujue">预算部</Option>
              <Option value="zhaocai">招采部</Option>
              <Option value="jjingban">总经办</Option>
            </Select>
          </Form.Item>
          <Form.Item name="newdate" label="打卡时间">
            <Space direction="vertical">
              <DatePicker placeholder="" />
            </Space>
          </Form.Item>
          <Form.Item></Form.Item>
          <Form.Item></Form.Item>
        </Form>
        <div className="ant-btn-block">
          <Button type="primary" htmlType="submit">查询</Button>
          <Button htmlType="button" onClick={this.onReset}>重置</Button>
        </div>
        <div className="ant-btn-block">
          <Button type="primary" htmlType="submit" onClick={this.ExportBtnClick}>EXCLE导出</Button>
        </div>
        <Table columns={columns} dataSource={this.state.data} scroll={{ x: 1700, y: 400 }} />
      </>
    );
  }
>>>>>>> 039e0124ae27cd35272dcd158b54ac6820d646eb
}
